<template>
  <div>
    <jc-bar prve-btn @prve="$router.back()" extensionBtn>
      <v-spacer />
      讲台信息
      <v-spacer />
      <v-btn icon @click="$router.push({ path: '/home' })">
        <v-icon> mdi-home </v-icon>
      </v-btn>
      <template #barextension>
        <v-tabs
          @change="handleTabsChange"
          align-with-title
          center-active
          next-icon="mdi-arrow-right-bold-box-outline"
          prev-icon="mdi-arrow-left-bold-box-outline"
          show-arrows
          v-model="tabs"
        >
          <v-tab v-for="(item, index) in hytype" :key="index">{{ item.title }}</v-tab>
        </v-tabs>
      </template>
    </jc-bar>
    <v-main>
      <v-container>
        <v-tabs-items v-model="tabs">
          <v-tab-item v-for="(item, index) in hytype" :key="index" class="transparent">
            <v-list class="transparent">
              <v-list-item v-for="titleItem in item['list']" :key="item._id" v-ripple @click="to(titleItem._id)">
                <v-list-item-title>{{ titleItem.biaoTi }}</v-list-item-title>
                <v-list-item-subtitle>{{ titleItem._id }}</v-list-item-subtitle>
              </v-list-item>
            </v-list>
          </v-tab-item>
        </v-tabs-items>
      </v-container>
    </v-main>
  </div>
</template>

<script>
import JcBar from "../../layout/JcBar";
import { getHyType, getHyItem } from "../../api/cloudbase-huayu";

export default {
  name: "index",
  components: { JcBar },
  data() {
    return {
      hytype: [],
      tabs: 0,
    };
  },
  async mounted() {
    await this.init();
  },
  methods: {
    async init() {
      const hytype = await getHyType();
      this.hytype = hytype.data;
      this.hytype.forEach((item) => {
        item["list"] = [];
        item["count"] = 0;
      });
      await this.getList();
      this.tabs = 1;
      this.$nextTick(() => {
        this.tabs = 0;
      });
    },
    async getList() {
      if (this.hytype[this.tabs].list.length === 0) {
        const hylist = await getHyItem(10, 1, this.hytype[this.tabs].title);
        this.hytype[this.tabs].list = hylist.data;
        this.hytype[this.tabs].count = hylist.total;
      }
      return true;
    },
    async handleTabsChange(val) {
      await this.getList();
      this.tabs = 0;
      this.$nextTick(() => {
        this.tabs = val;
      });
    },
    to(id) {
      console.log(id);
      this.$router.push({
        name: "HuaYuPage",
        params: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped></style>
